<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue_test</title>
</head>
<script src="../js/vue.js"></script>
<body>
<div id="app-7">
    <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
</div>
</body>

<script type="text/javascript">
    // 定义一个组件
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{todo.text}}</li>'
    });

    var app7 = new Vue({
        el:'#app-7',
        data:{
            groceryList:[
                {id:0,text:'a'},
                {id:1,text:'b'},
                {id:2,text:'c'}
            ]
        }
    });


</script>

</html>